<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-repeat: no-repeat;
      background-image: url("./imgs/bj-1.jpg");
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    .container {

      max-width: 400px;
      padding: 20px;
      background-color: rgba(255,255,255,0.3);
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 550px;
      top: 180px;
    }
    input[type=text], input[type=password],input[type=checkpassword] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 50%;
    }
    button:hover {
      background-color: #45a049;
    }

    .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
    }
    img.avatar {
      width: 40%;
      border-radius: 30px;
    }
    .container > p {
      text-align: center;
    }
    span>psw {
      float: right;
      padding-top: 0;
    }
    @media screen and (max-width: 600px) {
      .container {
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
<form action="/login" method="post">
  <div class="container">
    <div class="imgcontainer">
      <img src="./imgs/网站图片.png"  class="avatar">
    </div>
    <label ><b>用户名</b></label>
    <input type="text" placeholder="输入用户名" name="uname" required>

    <label ><b>密码</b></label>
    <input type="password" placeholder="输入密码" name="psw" required>


    <label ><b>验证码</b></label>
    <input type="checkpassword" placeholder="输入验证码" name="check" required>

    <button type="submit">登录</button>
    <button type="submit">用户注册</button>

    <label>
      <input type="checkbox" checked="checked" name="remember"> 记住密码
    </label>
    <label>
      <input type="checkbox" checked="checked" name="forget"> 忘记密码
    </label>

  </div>


</form>

<script>
  // 取消按钮跳转到首页
  document.querySelector('.cancelbtn').addEventListener('click', function() {
    window.location.href = '/';
  });
</script>
</body>
</html>